@import "@/styles/variables";
@import "scheduler";

:root {
  --pad: 20px;
}

* {
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  padding: 0 var(--pad);
}

html {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

html,
body {
  width: 100%;
  background: $color-bg;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
  &:visited {
    color: inherit;
  }
}

button {
  background: none;
  border: none;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-wrapper {
  margin: 2rem;
  padding: 2rem;
  background: $color-white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.scheduler {
  max-width: 100% !important;
  width: 100% !important;
}


.react-calendar-timeline .rct-header-root {
  background: #1F2937!important;
  border-bottom: 1px solid #bbb; }

.lds-wrap {
  display: flex;
  justify-content: center;
  margin: 2rem;
}

.lds-dual-ring {
  width: 10rem;
  height: 10rem;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0;
  border-radius: 50%;
  border: 1rem solid $color-primary;
  border-color: $color-primary transparent $color-primary transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


